import { useState } from "react";




function App() {


    const [obj, setObj] = useState({
        x: 0,
        y: 0,
        w: 100,
        h: 100
    })

    function mouseMove(evnet) {
        console.log(evnet.clientX, evnet.clientY);


        // 鼠标移动的时候修改 x 和 y 会导致 w 和 h 的数据丢失
        // 因为我们赋值的对象中缺少 w 和 h
        // setObj({
        //     x: evnet.clientX,
        //     y: evnet.clientY
        // })


        // 如果这么写会有 w 和 h 两个值没有变化的属性，所以会比较浪费
        // setObj({
        //     x: evnet.clientX,
        //     y: evnet.clientY,
        //     w: 100,
        //     h: 100
        // })

        // 可以使用但是依然后 w 和 h 
        setObj({
            ...obj,
            x: evnet.clientX,
            y: evnet.clientY,
        })

        // 建议将 4 个属性写成两个对象

    }

    return <div onMouseMove={mouseMove} style={{ width: '100vw', height: '100vh', backgroundColor: '#f66' }}>

        <h1>
            x: {obj.x} ---- y: {obj.y},
            w: {obj.w} ---- h: {obj.h}
        </h1>
    </div>
}


export default App